import * as motion from "motion/react-client";
import { Variants } from "motion/react";

export function AnimateHeaderVariants() {

    const container: Variants = {
        invisible: {
            opacity: 0,
        },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.2,
            }
        }
    }
    const item: Variants = {
        invisible: {
            opacity: 0,
            y: 60,
            filter: "blur(6px)",
        },
        visible: {
            opacity: 1,
            y: 0,
            filter: [ "blur(6px)", "blur(4px)", "blur(0px)" ],
        }
    }

    return (
        <motion.ul className="flex gap-x-5 justify-center items-center my-12 py-12"
                   variants={ container }
                   initial="invisible"
                   animate="visible">
            <motion.li variants={ item }>
                <span className="text-4xl md:text-6xl lg:text-8xl duration-300">Let's</span>
            </motion.li>
            <motion.li variants={ item }>
                <span className="text-4xl md:text-6xl lg:text-8xl duration-300">Try</span>
            </motion.li>
            <motion.li variants={ item }>
                <span className="text-4xl md:text-6xl lg:text-8xl duration-300">It</span>
            </motion.li>
        </motion.ul>
    )
}

